// Copyright © 2020 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

:global
  .Toastify__toast-container
    z-index: 9999
    position: fixed
    padding: 4px
    width: 320px
    box-sizing: border-box
  .Toastify__toast-container--top-left
    top: 1em
    left: 1em
  .Toastify__toast-container--top-center
    top: 1em
    left: 50%
    margin-left: -160px
  .Toastify__toast-container--top-right
    top: 1em
    right: 1em
  .Toastify__toast-container--bottom-left
    bottom: 1em
    left: 1em
  .Toastify__toast-container--bottom-center
    bottom: 1em
    left: 50%
    margin-left: -160px
  .Toastify__toast-container--bottom-right
    bottom: 1em
    right: 1em

  .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left
    animation-name: Toastify__slideInLeft

  .Toastify__slide-enter--top-right
    animation-name: Toastify__slideInRight

  .Toastify__slide-enter--bottom-right
    animation-name: Toastify__slideInRight

  .Toastify__slide-enter--top-center
    animation-name: Toastify__slideInDown

  .Toastify__slide-enter--bottom-center
    animation-name: Toastify__slideInUp

  .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left
    animation-name: Toastify__slideOutLeft

  .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right
    animation-name: Toastify__slideOutRight

  .Toastify__slide-exit--top-center
    animation-name: Toastify__slideOutUp

  .Toastify__slide-exit--bottom-center
    animation-name: Toastify__slideOutDown

  .Toastify__toast
    position: relative
    min-height: 64px
    box-sizing: border-box
    padding: 8px
    border-radius: 1px
    display: -ms-flexbox
    display: flex
    justify-content: space-between
    max-height: 800px
    overflow: hidden
    font-family: $font-family
    cursor: pointer
    direction: ltr
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05)
  .Toastify__toast--rtl
    direction: rtl
  .Toastify__toast-body
    margin: auto 0
    flex: 1

  .Toastify__progress-bar
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    height: 5px
    z-index: 9999
    opacity: .7
    background-color: rgba(255, 255, 255, .7)
    transform-origin: left
  .Toastify__progress-bar--animated
    animation: Toastify__trackProgress linear 1 forwards
  .Toastify__progress-bar--controlled
    transition: transform .2s
  .Toastify__progress-bar--rtl
    right: 0
    left: initial
    transform-origin: right

@media only screen and (max-width: 480px)
  :global
    .Toastify__toast-container
      width: 100vw
      padding: 0
      left: 0
      margin: 0
    .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right
      top: 0
    .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right
      bottom: 0
    .Toastify__toast-container--rtl
      right: 0
      left: initial

@media only screen and (max-width: 480px)
  :global(.Toastify__toast)
    margin-bottom: 0

@keyframes :global(Toastify__trackProgress)
  0%
    transform: scaleX(1)
  100%
    transform: scaleX(0)

@keyframes :global(Toastify__bounceInRight)
  from,
  60%,
  75%,
  90%,
  to
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  from
    opacity: 0
    transform: translate3d(3000px, 0, 0)
  60%
    opacity: 1
    transform: translate3d(-25px, 0, 0)
  75%
    transform: translate3d(10px, 0, 0)
  90%
    transform: translate3d(-5px, 0, 0)
  to
    transform: none

@keyframes :global(Toastify__bounceOutRight)
  20%
    opacity: 1
    transform: translate3d(-20px, 0, 0)
  to
    opacity: 0
    transform: translate3d(2000px, 0, 0)

@keyframes :global(Toastify__bounceInLeft)
  from,
  60%,
  75%,
  90%,
  to
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  0%
    opacity: 0
    transform: translate3d(-3000px, 0, 0)
  60%
    opacity: 1
    transform: translate3d(25px, 0, 0)
  75%
    transform: translate3d(-10px, 0, 0)
  90%
    transform: translate3d(5px, 0, 0)
  to
    transform: none

@keyframes :global(Toastify__bounceOutLeft)
  20%
    opacity: 1
    transform: translate3d(20px, 0, 0)
  to
    opacity: 0
    transform: translate3d(-2000px, 0, 0)

@keyframes :global(Toastify__bounceInUp)
  from,
  60%,
  75%,
  90%,
  to
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  from
    opacity: 0
    transform: translate3d(0, 3000px, 0)
  60%
    opacity: 1
    transform: translate3d(0, -20px, 0)
  75%
    transform: translate3d(0, 10px, 0)
  90%
    transform: translate3d(0, -5px, 0)
  to
    transform: translate3d(0, 0, 0)

@keyframes :global(Toastify__bounceOutUp)
  20%
    transform: translate3d(0, -10px, 0)
  40%,
  45%
    opacity: 1
    transform: translate3d(0, 20px, 0)
  to
    opacity: 0
    transform: translate3d(0, -2000px, 0)

@keyframes :global(Toastify__bounceInDown)
  from,
  60%,
  75%,
  90%,
  to
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  0%
    opacity: 0
    transform: translate3d(0, -3000px, 0)
  60%
    opacity: 1
    transform: translate3d(0, 25px, 0)
  75%
    transform: translate3d(0, -10px, 0)
  90%
    transform: translate3d(0, 5px, 0)
  to
    transform: none

@keyframes :global(Toastify__bounceOutDown)
  20%
    transform: translate3d(0, 10px, 0)
  40%,
  45%
    opacity: 1
    transform: translate3d(0, -20px, 0)
  to
    opacity: 0
    transform: translate3d(0, 2000px, 0)

@keyframes :global(Toastify__zoomIn)
  from
    opacity: 0
    transform: scale3d(.3, .3, .3)
  50%
    opacity: 1

@keyframes :global(Toastify__zoomOut)
  from
    opacity: 1
  50%
    opacity: 0
    transform: scale3d(.3, .3, .3)
  to
    opacity: 0

@keyframes :global(Toastify__flipIn)
  from
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
    animation-timing-function: ease-in
    opacity: 0
  40%
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
    animation-timing-function: ease-in
  60%
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg)
    opacity: 1
  80%
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  to
    transform: perspective(400px)

@keyframes :global(Toastify__flipOut)
  from
    transform: perspective(400px)
  30%
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
    opacity: 1
  to
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
    opacity: 0

@keyframes :global(Toastify__slideInRight)
  from
    transform: translate3d(110%, 0, 0)
    visibility: visible
  to
    transform: translate3d(0, 0, 0)

@keyframes :global(Toastify__slideInLeft)
  from
    transform: translate3d(-110%, 0, 0)
    visibility: visible
  to
    transform: translate3d(0, 0, 0)

@keyframes :global(Toastify__slideInUp)
  from
    transform: translate3d(0, 110%, 0)
    visibility: visible
  to
    transform: translate3d(0, 0, 0)
